/*
 * @Author: lcs
 * @Date: 2021-01-31 17:10:15
 * @LastEditTime: 2021-02-05 07:49:09
 * @LastEditors: lcs
 * @FilePath: \webpack_study\webpack.config.js
 * @Description: 
 */
// 用resolve 用来拼接绝对路径的方法
const {resolve}= require ('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
// 输出css成文件 link 引入页面不会闪一下
const MininCssEatractPlugin =require('mini-css-extract-plugin')
// 压缩css
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
process.env.NODE_ENV ="development"
// webpack配置
module.exports={
    // 入口起点
    entry:['./src/js/index.js','./src/index.html'],
    // 输出(输出（Output）指示Webpack 打包后的资源bundles 输出到哪里去，以及如何命名)
    output:{
        // 输出的文件名
        filename:'js/built.js',
        // 输出路径
        // __dirname  nodesjs 的变量，代表当前文件目录的绝对路径
        path:resolve(__dirname,'build'),
        publicPath:'./'
    },
    // loader的配置(Loader 让Webpack 能够处理那些非javaScript 文件（Webpack自身只理解javaScript）例如：XX.less =>XX.css )
    module:{
        rules:[
            // 详细loader 配置
            {   
                // 匹配哪些文件
                test:/\.css$/, 
                // 使用哪些loader进行处理
                use:[
                    // 创建style-标签 将js中的样式资源插入添加到head 中生效（需要下载style-loader）
                    // 'style-loader',
                    // 下面这个loader 取代style-loader 
                    // 作用：提取js中的css 成单独文件
                    MininCssEatractPlugin.loader,
                    // 将css文件变成commonjs 模块加载到js  里面的内容是样式字符串（需要下载css-loader）
                    'css-loader',
                    // css 兼容性处理 postcss--> postcss-loader postcss-preset-env
                    // 帮助postcss 找到 package.json 中browserslist 里面的配置，通过配置加载指定的css兼容性样式
                    /**
                     * 
                     *   "browserslist":{
                    //  *     开发环境-》设置node环境变量：process.env.NODE_ENV =development
                              "development":[
                                "last 1 chrome version", // 最近的chrome 版本
                                "last 1 firefox version",
                                "last 1 safari version"
                              ],
                              // 生产环境
                              "production":[
                                ">0.2%",  //大于%99.8 的版本
                                "not dead", //放弃已经死掉的浏览器
                                "not op_mini all" 放弃兼容 op_mini 浏览器
                              ]
                          }
                     */
                    {
                        // 使用过loader 的默认设置
                        loader:'postcss-loader',
                        options:{
                          // 设置 PostCSS 选项与插件
                          postcssOptions:{
                            ident:'postcss',
                            plugins:[require('postcss-preset-env')()]
                              
                            
                          },
                        }
                   }
                ] 
            },
            { 
              test:/\.html/,
              loader:'html-loader'
            },
            {
              test:/\.(jpg|png|gif)/,
              loader:'url-loader',
              options:{
                limit:10*1024,
                esModule:true,
                name:'[hash:10].[ext]',
                outputPath:'imgs'
              }
            },

            /**
             * 语法检查:eslint-loader eslint
             * 注意：只检查自己写的源代码，第三方的库不用检查
             * 设置检查规则：
             *    package.json中的eslintConfig 中设置
             *       "eslintConfig":{
             *              "extends":"airbnb-base"
             *            }
             *    使用airbnb风格指南检查规则--->所需依赖：eslint eslint-config-airbnb-base eslint-plugin-import    
              {
                  test:/\.js$/,
                  exclude:/node_modules/,
                  loader:'eslint-loader',
                  options:{
                    // 自动修复
                    fix:true
                  }
              }
            */

            // js 兼容性处理 babel-loader  @babel/core  @babel/preset-env
              // 1.基本js 兼容性处理 --》@babel/preset-env
              // 问题：只能转换基本语法，如promise 不能转换
              // 2.全部js 兼容性处理--》@babel/polyfill (直接在js import '@babel/polyfill')
              // 问题：我只要解决部分兼容性问题，但是会将所有的兼容性代码引入，打包体积过大
              // 3. 需要做兼容性处理的就做按需加载 --》core-js
              {
                test:/\.js$/,
                loader:'babel-loader',
                exclude:/node_modules/,
                options:{
                  // 预设：指示babel 做怎么样的兼容性处理
                  presets:[
                    [
                      '@babel/preset-env',
                      {
                        // 按需加载
                        useBuiltIns:'usage',
                        // 指定core-js 版本
                        corejs:{
                          version:3
                        },
                        // 指定兼容性做到那个版本浏览器
                        targets:{
                          chrome:'60',
                          firefox:'60',
                          ie:'9',
                          safari:'10',
                          edge:'17'
                        },
                      }
                    ]
                  ]
                }
            },
             // 打包其他资源
            {
              // 排除其他资源
              exclude:/\.(css|js|html|jpg|png|gif|jpeg)/,
              loader:'file-loader',
              options:{
                name:'[hash:10].[ext]',
                outputPath:'media'
              },
            }
        ]
    },
    // plugin 配置
    plugins:[
        // 详细plugin的配置
        new htmlWebpackPlugin({
          template:'./src/index.html',
          minify:{
            // 移除空格
            collapseWhitespace:true,
            // 移除注释
            removeComments:true
          }
        }),
        new MininCssEatractPlugin({
        // 将css 输出到css 目录下
          filename:'css/[name].[chunkhash:8].css'
        }),
        new OptimizeCssAssetsWebpackPlugin()

        
    ],
    mode:'development',
    devServer:{
      // 告诉服务器从何处提供内容。仅当您要提供静态文件时才需要这样做
      contentBase:resolve(__dirname,'build'),
      // 启用gzip压缩：
      compress:true,
      // 指定端口号以侦听以下请求
      port:3000,
      // 自动打开浏览器 设置true为打开默认浏览器
      open:true,
      hot: true,   // 热加载
    }
}